<template>
	<div :class="{'orderdetail':true,'orderdetailedit':order.invoice_auth=='0'}">
		<!-- 顶部 -->
	   <div class="orderdetail_head">
	      <div class="head_status">
	         <span v-if="order.status == '预订'">预订中</span>
	         <span v-if="order.status == '入住'">已入住</span>
	         <span v-if="order.status == '退房'">已退房</span>
	      </div>
	      <div class="order_step">
	      	 	<span v-bind:class="step[0]?'currentspan':''"></span>
	      	 	<p></p>
	      	 	<span v-bind:class="step[1]?'currentspan':''"></span>
	      	 	<p></p>
	           <span v-bind:class="step[2]?'currentspan':''"></span>
	      </div>
	      <div class="step_text">
	      	 <div class="step_item">
	      	 	<span >预订</span>
	      	 	<span class="time">{{order.create_time.month}}<br>{{order.create_time.day}}</span>
	      	 </div>
	      	 <div class="step_item middle">
	      	 	<span>入住</span>
	      	 	<span class="time">{{order.checkInTime.month}}<br>{{order.checkInTime.day}}</span>
	      	 </div>
	      	 <div class="step_item">
	      	 	<span>退房</span>
	      	 	<span class="time">{{order.checkOutTime.month}}<br>{{order.checkOutTime.day}}</span>
	      	 </div>	      	 	      	 
	      </div>	   	
	   </div>
	   <!-- 订单 -->
	   <div class="hotel_info">
			<div class="hotel_name">
			  <span class="name_left">{{order.name}}</span>
			 <div class="name_right" v-if="order.index_auth=='1'">
			 	<router-link :to="{path:'/hotel',query:{hotel_code:order.hotel_code}}">查看酒店服务</router-link>
			 	<i></i>
			 </div>
			</div> 
			<div class="hotel_address">{{order.address}}</div>  	
			<div class="hotel_address">{{order.phone}}</div> 
	   </div>
	   <div class="hotel_info">
			<div class="hotel_name">
			  <span class="name_left">{{order.roomType}}</span>
			</div> 	
		   <div class="hotel_address">{{order.checkInTime.month}} - {{order.checkOutTime.month}} | 共{{order.day}}晚 | {{order.roomCount}}间房</div> 
		   <span class="hotel_info_price">¥{{order.roomPrice.int}}<span class="">{{order.roomPrice.float}}</span></span>   	
	   </div>
	   <div class="map">
	       <div class="maparea" @click="map">
	       	<i></i>
	       	<span>查看路线</span>
	       </div>
		   <a  :href="'tel:'+order.phone" class="phonearea">
		   	 <i></i>
		   	 <span>联系酒店</span>
		   </a>
	   </div>
	   <!-- 入住信息 -->
	   <div class="live_info">
	      <div class="live_title">入住人信息</div>
	      <div v-for="item in guests">
		   	  <div class="live_item live_item1">
		   	  	<i>{{item.name}}</i>
		   	  	<span>{{item.phone}}</span>
		   	  </div>
<!-- 		   	  <div class="live_item">
		   	  	<i>联系电话</i>
		   	  	<span>{{item.phone}}</span>
		   	  </div>
		   	  <div class="live_item">
		   	  	<i>身份证号</i>
		   	  	<span>{{item.idNumber}}</span>
		   	  </div> -->
	   	  </div>		   	  	   	  
	   </div>

	   <div class="live_info">
	      <div class="live_title">预订人信息</div>
	   	  <div class="live_item live_item1">
	   	  	<i>{{order.contactName}}</i>
	   	  	<span>{{order.contactPhone}}</span>
	   	  </div>
<!-- 	   	  <div class="live_item">
	   	  	<i>联系电话</i>
	   	  	<span>{{order.contactPhone}}</span>
	   	  </div>
	   	  <div class="live_item">
	   	  	<i>身份证号</i>
	   	  	<span>{{order.idNumber}}</span>
	   	  </div> -->		   	  	   	  
	   </div>	 

	   <div class="live_info">
	      <div class="live_title">订单信息</div>
	   	  <div class="live_item">
	   	  	<i>订单号</i>
	   	  	<span>{{order.orderNumber}}</span>
	   	  </div>
	   	  <div class="live_item">
	   	  	<i>下单时间</i>
	   	  	<span>{{order.create_time.month}} {{order.create_time.day}}</span>
	   	  </div>
	   	  <div class="live_item">
	   	  	<i>订单金额</i>
	   	  	<span>{{order.total_price}}元</span>
	   	  </div>
<!-- 	   	  <div class="live_item">
	   	  	<i>其他消费金额</i>
	   	  	<span>{{order.bill}}元</span>
	   	  </div>	 -->	   	  		   	  	   	  
	   </div>
	   	<!--  发票-->
	   	<div class="order_invoce order_invoce_delete" v-if="order.invoice_type!=0&&order.status == '退房'">
	   	    <span @click="deleteorder(order.id)">删除订单</span>
	   		<router-link :to="{path:'/inviocedetail',query:{orderNumber:order.orderNumber}}">查看发票详情</router-link>
	   	</div>
	   	<div :class="{'order_invoce':true, 'order_invoce_delete':true,'cancelfix':order.invoice_auth=='0'}" v-if="order.invoice_type==0&&order.status == '退房'">
	   	    <span @click="deleteorder(order.id)">删除订单</span>
	   		<router-link :to="{path:'/apply_invioce',query:{orderNumber:order.orderNumber}}" v-if="order.invoice_auth=='1'">申请开发票</router-link>
	   	</div>
	    <div class="order_invoce" v-if="order.invoice_type!=0&&order.status == '入住'">
	   		<router-link :to="{path:'/inviocedetail',query:{orderNumber:order.orderNumber}}">查看发票详情</router-link>
	   	</div>
	   	<div :class="{'order_invoce':true,'cancelfix':order.invoice_auth=='0','edithight':order.invoice_auth=='0'}" v-if="order.invoice_type==0&&order.status == '入住'">
	   		<router-link :to="{path:'/apply_invioce',query:{orderNumber:order.orderNumber}}" v-if="order.invoice_auth=='1'">申请开发票</router-link>
	   	</div>	   	
	</div>
</template>
<script>
import axios from 'axios';
import Wx from 'weixin-js-sdk';
import {Toast } from 'mint-ui';
import { MessageBox } from 'mint-ui'
 export default {
 	data(){
 		return{
 			step:[true,false,false],//订单的状态
 			guests:"",//入住人
 			order:""//订单信息
 		}    
 	},
 	created(){
	     const vm = this;
	     let url = window.location.href;
	     vm.wxShare(url); 		
 		 var that  = this;
 		 var orderNumber  = that.$route.query.orderNumber;
         axios.post("/Weixin/Order/orderDetail",{orderNumber:orderNumber}).then((res)=>{
         if(res.data.code == "1"){
         	  var guests = res.data.guests
         	  var order = res.data.order;
         	  /*流程判断*/
         	  if(order.status == "预订"){
         	  	that.step = [true,false,false];
         	  }
         	  else if(order.status == "入住"){
				that.step = [true,true,false];
         	  }
              else if(order.status == "退房"){
         	  	that.step = [true,true,true];
         	  }
         	  /*裁剪时间戳*/
         	  function time(time){
         	  	var month = time.substr(0,10);
         	  	var day = time.substr(11,19);
         	  	var obj = {
					month:month,
					day:day
         	  	}
         	  	return obj;
         	  }
         	  order.create_time = time(order.create_time);
         	  order.checkInTime = time(order.checkInTime);
         	  order.checkOutTime = time(order.checkOutTime);
         	  order.roomPrice = that.cutstring(order.roomPrice)
         	  that.order = order;
         	  that.guests = guests;
	         /*获取酒店经纬度*/
		      axios.post("/Weixin/Hotel/hotelDetail",{hotel_code:order.hotel_code}).then((res)=>{
		        if(res.data.code == "1"){
		          var lat = res.data.data.lat;
		          var long = res.data.data.long;
		          that.lat = lat;
		          that.long = long;
		        }
		      })          	  
         }
       })     
 	},
 	methods:{
 		//身份证号*****
 		Idnumber(number){
 		  if(number.length==15){
             number = number.substr(0, 5) + '********' + number.substr(14);	  	
 		  }
 		  else{
			 number = number.substr(0, 5) + '***********' + number.substr(17);	 		  	
 		  }
 		  return number;
 		},
        //删除订单
        deleteorder(id){
        	    var that =  this;
    			MessageBox.confirm('确定删除本订单?').then(action => {
    		      axios.post("/Weixin/Order/delOrder",{id:id}).then((res)=>{
    		         if(res.data.code == "1"){
    		           that.$router.go(-1)
    		           that.$store.state.deleteid = id;
    		         }
	                 else{
	                      Toast("删除成功")
	                 }
    		      })
    			})
        }, 	
	    cutstring(str){
	      var obj ={
	        int:str.substr(0,str.indexOf(".")+1),
	        float:str.substr(str.indexOf(".")+1,100)
	      }
	      return obj
	    },        	
	      map(){
	      	var that = this;
	      	console.log(Number(that.lat),Number(that.long),that.order.name,that.order.address)
	        Wx.getLocation({
	          type :'gcj02', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
	          success : function(res) {
	            //使用微信内置地图查看位置接口
	            console.log("成功")
	            Wx.openLocation({
	              latitude : Number(that.lat), // 纬度，浮点数，范围为90 ~ -90
	              longitude : Number(that.long),// 经度，浮点数，范围为180 ~ -180。
	              name : that.order.name, // 位置名
	              address :that.order.address, // 地址详情说明
	              scale : 18, // 地图缩放级别,整形值,范围从1~28。默认为最大
	              infoUrl : '' // 在查看位置界面底部显示的超链接,可点击跳转（测试好像不可用）
	            });
	          },
	          cancel:function(res) {
	            
	          },
	          fail(res){
	            console.log(res,"错误提示")

	          }
	        })          
	      }
 	}
 }
	
</script>
<style type="less">
	.map{
		display:flex;
		justify-content:center;
		align-items:center;
		height: 43px;
		background:#fff;
		width:100%;

	}
		.maparea{
          width:50%;
          display:flex;
          justify-content:center;
		  align-items:center;
		  border-right:  1px solid #EEEEEE;

		}
	   .maparea i{
					width:18px;
					height:22px;
					background:url(../../assets/image/address.png) no-repeat;	
					background-size:100% 100%;
					margin-right:10px;	
	   }
	   	.phonearea i {
					width:22px;
					height:22px;
					background:url(../../assets/image/phonecall.png) no-repeat;	
					background-size:100% 100%;
					margin-right:10px;
	   	}
		.phonearea{
			width:50%;
		   display:flex;
           justify-content:center;
		   align-items:center;
		   color:#333333;		
		}
		.hotel_info_price{
			font-size: 15px;
			position:absolute;
			right:15px;
			top:19px;
		}
</style>